<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>

    const {createApp, h, reactive, ref} = VueRuntimeDOM;
    // const {reactive} = VueReactivity
    let t = null;
    let App = {
      setup(props, context) {
        let flag = ref(true)
        clearTimeout(t)
        t = setTimeout(() => {
          flag.value = false;
          console.log('更新了')
        }, 1000)
        return () => {
          // return flag.value ?  
          //   h('div', {style: {color: 'red'}}, 'tom') :
          //     h('div', {style: {color: 'blue'}}, 'jerry')

          //#region 
          // return flag.value ?  
          //   h('ul', {style: {color: 'red'}}, [
          //     h('li', {key: 'a'}, 'a'),
          //     h('li', {key: 'b'}, 'b'),
          //     h('li', {key: 'c'}, 'c'),
          //   ]) :
          //     h('ul', {style: {color: 'blue'}}, [
          //       h('li', {key: 'a'}, 'a'),
          //       h('li', {key: 'b'}, 'b'),
          //       h('li', {key: 'd'}, 'd'),
          //       h('li', {key: 'e'}, 'e'),
          //     ])
      
          // return flag.value ?  
          //   h('ul', {style: {color: 'red'}}, [
          //     h('li', {key: 'a'}, 'a'),
          //     h('li', {key: 'b'}, 'b'),
          //     h('li', {key: 'c'}, 'c'),
          //   ]) :
          //     h('ul', {style: {color: 'blue'}}, [
          //       h('li', {key: 'd'}, 'd'),
          //       h('li', {key: 'e'}, 'e'),
          //       h('li', {key: 'b'}, 'b'),
          //       h('li', {key: 'c'}, 'c'),
          //     ])
          //#endregion

          //#region 
          // return flag.value ?  
          //   h('ul', {style: {color: 'red'}}, [
          //     h('li', {key: 'a'}, 'a'),
          //     h('li', {key: 'b'}, 'b'),
          //     h('li', {key: 'c'}, 'c'),
          //   ]) :
          //     h('ul', {style: {color: 'blue'}}, [
          //       h('li', {key: 'a'}, 'a'),
          //       h('li', {key: 'b'}, 'b'),
          //       h('li', {key: 'c'}, 'c'),
          //       h('li', {key: 'd'}, 'd'),
          //     ])

          // return flag.value ?  
          //   h('ul', {style: {color: 'red'}}, [
          //     h('li', {key: 'a'}, 'a'),
          //     h('li', {key: 'b'}, 'b'),
          //     h('li', {key: 'c'}, 'c'),
          //   ]) :
          //     h('ul', {style: {color: 'blue'}}, [
          //       h('li', {key: 'd'}, 'd'),
          //       h('li', {key: 'a'}, 'a'),
          //       h('li', {key: 'b'}, 'b'),
          //       h('li', {key: 'c'}, 'c'),
          //     ])

          // // 或者
          // return flag.value ?  
          //   h('div', {style: {color: 'red'}}, h('span', 'TOM')) :
          //     h('div', {style: {color: 'blue'}}, [h('span', 'jerry'), h('span', 'jerry')])
          //#endregion
          
          //#region 
          // return flag.value ?  
          //   h('ul', {style: {color: 'red'}}, [
          //     h('li', {key: 'a'}, 'a'),
          //     h('li', {key: 'b'}, 'b'),
          //     h('li', {key: 'c'}, 'c'),
          //     h('li', {key: 'd'}, 'd'),
          //   ]) :
          //     h('ul', {style: {color: 'blue'}}, [
          //       h('li', {key: 'a'}, 'a'),
          //       h('li', {key: 'b'}, 'b'),
          //       h('li', {key: 'c'}, 'c'),
          //     ])

          // return flag.value ?  
          //   h('ul', {style: {color: 'red'}}, [
          //     h('li', {key: 'd'}, 'd'),
          //     h('li', {key: 'a'}, 'a'),
          //     h('li', {key: 'b'}, 'b'),
          //     h('li', {key: 'c'}, 'c'),
          //   ]) :
          //     h('ul', {style: {color: 'blue'}}, [
          //       h('li', {key: 'a'}, 'a'),
          //       h('li', {key: 'b'}, 'b'),
          //       h('li', {key: 'c'}, 'c'),
          //     ])

          // // 或者
          // return flag.value ?  
          //   h('div', {style: {color: 'red'}}, [h('span', 'jerry'), h('span', 'jerry')]) :
          //     h('div', {style: {color: 'blue'}}, h('span', 'TOM'))
          //#endregion

          //#region 
          // return flag.value ?  
          //   h('ul', {style: {color: 'red'}}, [
          //     h('li', {key: 'a'}, 'a'),
          //     h('li', {key: 'b'}, 'b'),

          //     h('li', {key: 'c', style:{color: 'skyblue'}}, 'c'),
          //     h('li', {key: 'd'}, 'd'),
          //     h('li', {key: 'e'}, 'e'),

          //     h('li', {key: 'q'}, 'q'),

          //     h('li', {key: 'f'}, 'f'),
          //     h('li', {key: 'g'}, 'g'),
          //   ]) :
          //     h('ul', {style: {color: 'blue'}}, [
          //     h('li', {key: 'a'}, 'a'),
          //     h('li', {key: 'b'}, 'b'),
              
          //     h('li', {key: 'e'}, 'e'),
          //     h('li', {key: 'c', style:{color: 'green'}}, 'c'),
          //     h('li', {key: 'd'}, 'd'),
          //     h('li', {key: 'h'}, 'h'),

          //     h('li', {key: 'f'}, 'f'),
          //     h('li', {key: 'g'}, 'g'),
          //   ])

          return flag.value ?  
            h('ul', {style: {color: 'red'}}, [
              h('li', {key: 'a'}, 'a'),
              h('li', {key: 'b'}, 'b'),
              h('li', {key: 'c', style:{color: 'skyblue'}}, 'c'),
              h('li', {key: 'd'}, 'd'),
              h('li', {key: 'e'}, 'e'),
              h('li', {key: 'q'}, 'q'),
              h('li', {key: 'f'}, 'f'),
              h('li', {key: 'g'}, 'g'),
            ]) :
              h('ul', {style: {color: 'blue'}}, [
              h('li', {key: 'a'}, 'a'),
              h('li', {key: 'b'}, 'b'),
              
              h('li', {key: 'e'}, 'e'),
              h('li', {key: 'c', style:{color: 'green'}}, 'c'),
              h('li', {key: 'd'}, 'd'),
              h('li', {key: 'h'}, 'h'),

              h('li', {key: 'f'}, 'f'),
              h('li', {key: 'g'}, 'g'),
            ])
          //#endregion
        }
        
      },
    }

    const app = createApp(App, {
      name: 'tom',
      age: 12
    })
    app.mount('#app');

  </script>
</body>
</html>